.example-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
 .example-toolbar {
    position: fixed;
    right: 0px;
    /* Make sure the toolbar will stay on top of the content as it scrolls past. */
    z-index: 1;
  }
  
  h1.example-app-name {
    margin-left: 8px;
  }
  
  .example-sidenav-container {
    /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
       causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
    flex: 1;
  }
  
  .example-is-mobile .example-sidenav-container {
    /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
       `<body>` to be our scrolling element for mobile layouts. */
    flex: 1 ;
  }
  